<template lang="pug">
  .BindAccountModal
    Modal(
      v-model="isShowBindAccountModal"
      title="账号绑定"
      class-name="vertical-center-modal"
      width="1000"
    )
      Table.hasTitle-table.beautiful-table(:columns="thead" :data="waitTableData" :stripe="true"
        @on-selection-change="handleOnSelectChange('waitTable', $event)"
      )
        .clearfix.font-16(slot="header")
          .table-title-lefttxt.pull-left.font-weight.text-info 待选账号
          .pull-left.pt-5.pl-20
            Input(v-model="searchWaitText" placeholder="请输入账号名称进行搜索")
          .pull-left.pt-7.pl-10
            Button(@click="searchFn(roleId, false, 'waitTable')") 查询
          .pull-right.table-title-btns
            Button.mr-10(type="info" @click="saveUserRole(roleId, true, waitSelectedId)") 绑定角色
        .clearfix.pl-20.pr-20(slot="footer")
          Page(
            :current="waitTableComone.pageIndex"
            :total="waitTableComone.totalRows"
            :page-size="3"
            show-total
            @on-change="onChangePage('waitTable', $event)"
            @on-page-size-change="onpageSizeChange('waitTable', $event)"
          )

      .h24.border-b-dashed.mb-24

      Table.hasTitle-table.beautiful-table(:columns="thead" :data="selectedTableData" :stripe="true"
        @on-selection-change="handleOnSelectChange('selectedTable', $event)"
      )
        .clearfix.font-16(slot="header")
          .table-title-lefttxt.pull-left.font-weight.text-error 已选账号
          .pull-left.pt-5.pl-20
            Input(v-model="searchSelectedText" placeholder="请输入账号名称进行搜索")
          .pull-left.pt-7.pl-10
            Button(@click="searchFn(roleId, true, 'selectedTable')") 查询
          .pull-right.table-title-btns
            Button.mr-10(type="warning" @click="saveUserRole(roleId, false, selectedSelectedId)") 取消绑定
        .clearfix.pl-20.pr-20(slot="footer")
          Page(
            :current="selectedTableComone.pageIndex"
            :total="selectedTableComone.totalRows"
            :page-size="3"
            show-total
            @on-change="onChangePage('selectedTable', $event)"
            @on-page-size-change="onpageSizeChange('selectedTable', $event)"
          )
      //- .clearfix(slot="footer")
      //-   Button(type="text" @click="cancel") 取消
      //-   Button(type="primary") 保存
</template>

<script>
import { Common } from '@/utils/common.js'
import { RoleApi } from '@/api/Role.api.js'
// import { UserApi } from '@/api/User.api.js'
import UserApi from '@/api/User.api.js'
import { roleBindThead } from '../RMtableHead.js'
import _cloneDeep from 'clone-deep'
export default {
  name: 'BindAccountModal',

  watch: {
  },

  data () {
    return {
      isShowBindAccountModal: false,
      thead: _cloneDeep(roleBindThead),
      waitTableData: [],
      waitTableComone: {
        pageIndex: 1, // 页码
        totalRows: 0, // 总条数
        pageSize: 3 // 当前页面展示条数
      },
      selectedTableData: [],
      selectedTableComone: {
        pageIndex: 1, // 页码
        totalRows: 0, // 总条数
        pageSize: 3 // 当前页面展示条数
      },
      roleId: null,
      waitSelectedId: [],
      searchWaitText: '',
      selectedSelectedId: [],
      searchSelectedText: ''
    }
  },

  mounted () {
  },

  methods: {
    show () {
      this.searchWaitText = ''
      this.searchSelectedText = ''
      this.isShowBindAccountModal = true
    },

    // 监听所有调用的方法
    listenCall (methodsWords, param) {
      this[methodsWords](param)
    },

    /**
     * 分页页码变动
     * @param {Number} val pageIndex
     */
    onChangePage (str, val) {
      console.log('str: ' + str + ', val: ' + val)
      if (str === 'waitTable') {
        this.waitTableComone.pageIndex = val
        this.query(this.roleId, false, 'waitTable')
      } else if (str === 'selectedTable') {
        this.selectedTableComone.pageIndex = val
        this.query(this.roleId, true, 'selectedTable')
      }
    },
    /**
     * 分页页码变动
     * @param {Number} val pageSize
     */
    onpageSizeChange (str, val) {
      console.log('str: ' + str + ', val: ' + val)
      // this.tableComone.pageSize = val
      // this.query()
    },

    searchFn (roleId, isBind, tableType) {
      if (tableType === 'waitTable') {
        this.waitTableComone.pageIndex = 1
      } else {
        this.selectedTableComone.pageIndex = 1
      }
      this.query(roleId, isBind, tableType)
    },
    /**
     * 分页查询接口
     * @param {Object} obj {pageIndex, pageSize}
     */
    async query (roleId, isBind, tableType) {
      var params = {
        roleId: roleId,
        isBind: isBind
      }
      var waitObj = {
        HasPaging: true,
        PageIndex: this.waitTableComone.pageIndex,
        PageSize: this.waitTableComone.pageSize,
        Name: this.searchWaitText
      }
      var selectedObj = {
        HasPaging: true,
        PageIndex: this.selectedTableComone.pageIndex,
        PageSize: this.selectedTableComone.pageSize,
        Name: this.searchSelectedText
      }
      var pageObj = tableType === 'waitTable' ? waitObj : selectedObj
      let res = await UserApi.getList({ ...params, ...pageObj })
      if (tableType === 'waitTable') {
        console.log('待选表格res：', res)
        if (res.status === 200 && res.data.success) {
          this.waitTableData = res.data.data
          this.waitTableComone.totalRows = res.data.totalRows

          // 创建时间转换
          res.data.data.map(item => {
            item.createdOn = this.$moment(item.createdOn).format('YYYY-MM-DD HH:mm:ss')
          })
        } else {
          this.waitTableData = []
        }
      }
      if (tableType === 'selectedTable') {
        console.log('已选表格res：', res)
        if (res.status === 200 && res.data.success) {
          this.selectedTableData = res.data.data
          this.selectedTableComone.totalRows = res.data.totalRows

          // 创建时间转换
          res.data.data.map(item => {
            item.createdOn = this.$moment(item.createdOn).format('YYYY-MM-DD HH:mm:ss')
          })
        } else {
          this.selectedTableData = []
        }
      }
    },

    // 搜索
    // searchFn () {
    //   this.tableComone.pageIndex = 1
    //   this.query()
    // },

    // 表格选择操作
    handleOnSelectChange (str, value) {
      if (str === 'waitTable') {
        var arr = value.map((item) => {
          return item.id
        })
        this.waitSelectedId = arr
        console.log('待选表格里已勾选的项为: ', this.waitSelectedId)
      }
      if (str === 'selectedTable') {
        var arr = value.map((item) => {
          return item.id
        })
        this.selectedSelectedId = arr
        console.log('已选表格里已勾选的项为: ', this.selectedSelectedId)
      }
    },

    cancel () {
      this.isShowBindAccountModal = false
    },

    // 绑定/取消绑定
    async saveUserRole (roleId, isBind, selectId) {
      var params = {
        roleId: roleId,
        isBind: isBind,
        userIdList: selectId
      }
      console.log('绑定/取消绑定: ', params)
      let res = await RoleApi.saveUserRole(params)
      if (res.status === 200 && res.data.success) {
        this.$Message.success(res.data.message)
        this.query(this.roleId, false, 'waitTable')
        this.query(this.roleId, true, 'selectedTable')
      } else {
        this.$Message.error({
          content: res.data.message,
          duration: 10,
          closable: true
        })
      }
    }
  }
}
</script>

<style lang="less" scoped>

</style>
